/**
 * 倒计时组件
 */

'use client';

import React from 'react';
import { Calendar } from 'lucide-react';
import { clsx } from 'clsx';

export interface CountdownTimerProps {
  /** 剩余天数 */
  daysRemaining: number;
  /** 自定义类名 */
  className?: string;
}

export const CountdownTimer: React.FC<CountdownTimerProps> = ({
  daysRemaining,
  className
}) => {
  const [visible, setVisible] = React.useState(true);

  if (!visible) return null;

  return (
    <div
      className={clsx(
        'fixed bottom-6 right-6 z-30 cursor-pointer',
        'bg-white/90 backdrop-blur-sm rounded-lg shadow-lg border',
        'px-4 py-3 flex items-center gap-3',
        'text-sm text-gray-700 hover:bg-white/95 transition-all',
        className
      )}
      onClick={() => setVisible(false)}
      title="点击关闭"
    >
      <div className="flex items-center gap-2">
        <Calendar className="w-4 h-4 text-blue-500" />
        <span className="font-medium">
          距离学期结束还剩
        </span>
      </div>
      
      <div className="flex items-center gap-1">
        <span className="text-lg font-bold text-blue-600">
          {daysRemaining}
        </span>
        <span className="text-sm">天</span>
      </div>
    </div>
  );
};
